<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Back Button - Navigation</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script src="../../../../../dist/ionic/ionic.js"></script>
  </head>

  <body onload="loadFirstPage()">
    <ion-app>
      <ion-nav></ion-nav>
    </ion-app>
  </body>

  <script>
    async function loadFirstPage() {
      const nav = document.querySelector('ion-nav');
      const firstPage = document.createElement('div');
      firstPage.classList.add('first-page');
      firstPage.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
          </ion-buttons>
          <ion-title>Page One</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <h1>Page One</h1>
        <ion-button class="next">Go to Page Two</ion-button>
      </ion-content>
    `;

      await nav.setRoot(firstPage);

      // okay cool, we're in the DOM now
      const button = firstPage.querySelector('.next');
      button.addEventListener('click', async () => {
        await goToPageTwo(nav);
      });
    }

    async function goToPageTwo(nav) {
      const secondPage = document.createElement('div');
      secondPage.classList.add('second-page');
      secondPage.innerHTML = `
      <ion-header>
        <ion-toolbar color="secondary">
          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
          </ion-buttons>
          <ion-title>Page Two</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <h1>Page Two</h1>
        <p>Just an empty <code>ion-back-button</code></p>
        <ion-button class="next">Go to Page Three</ion-button>
      </ion-content>
    `;

      // okay cool, we're in the DOM now
      await nav.push(secondPage);

      const nextButton = secondPage.querySelector('ion-button.next');
      nextButton.addEventListener('click', async () => {
        await goToPageThree(nav);
      });
    }

    async function goToPageThree(nav) {
      const thirdPage = document.createElement('div');
      thirdPage.classList.add('third-page');
      thirdPage.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
          </ion-buttons>
          <ion-title>Page Three</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <h1>Page Three</h1>
        <p>Custom back button</p>
        <ion-button class="next">Go to Page Four</ion-button>
      </ion-content>
    `;

      // okay cool, we're in the DOM now
      await nav.push(thirdPage);

      const nextButton = thirdPage.querySelector('ion-button.next');
      nextButton.addEventListener('click', async () => {
        await goToPageFour(nav);
      });
    }

    async function goToPageFour(nav) {
      const fourthPage = document.createElement('div');
      fourthPage.classList.add('fourth-page');
      fourthPage.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-menu-button auto-hide="false"></ion-menu-button>
            <ion-back-button color="danger"></ion-back-button>
          </ion-buttons>
          <ion-title>Page Four</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <h1>Page Four</h1>
        <p>Back button and menu button</p>
      </ion-content>
    `;

      // okay cool, we're in the DOM now
      await nav.push(fourthPage);
    }
  </script>
</html>
